<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="formRef"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item :label="$t('common.belong_merchant') + ':'">
						<merchant-select
							v-model="queryData.ownerMerchantId"
							:merchantInfo.sync="merchantObj"
						></merchant-select>
					</el-form-item>
					<el-form-item :label="$t('report.statistical_date') + ':'">
						<el-date-picker
							v-model="searchTime"
							type="daterange"
							range-separator="-"
							:start-placeholder="$t('report.start_date')"
							:end-placeholder="$t('report.end_date')"
							:picker-options="pickerOptionsReport"
						></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('report.venue_type') + ':'">
						<el-select
							v-model="queryData.venueTypeCode"
							size="medium"
							:placeholder="$t('common.select_all')"
							clearable
						>
							<el-option
								v-for="item in venueTypeList"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('702041')"
							type="warning"
							icon="el-icon-download"
							size="medium"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					key="father"
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					show-summary
					:summary-method="
						(val) => handleRow(val, subSummary, totalSummary)
					"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						fixed
						prop="venueName"
						align="center"
						:label="$t('report.venue_name')"
					>
						<template slot-scope="scope">
							<el-link
								class="lightBlueColor"
								type="primary"
								@click="dialogData(scope.row)"
							>
								{{
									scope.row.venueName ||
										scope.row.venueTypeCode
								}}
							</el-link>
						</template>
					</el-table-column>
					<el-table-column
						prop="venueTypeName"
						align="center"
						:label="$t('report.venue_type')"
					>
						<template slot-scope="scope">
							{{
								typeFilter(
									scope.row.venueTypeCode,
									'bwVenueTypeList'
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="amountIn"
						align="center"
						:label="$t('report.rebate_amount')"
					>
						<template slot-scope="scope">
							<p>
								{{
									handleTotalNumber(
										'CNY',
										scope.row.amountInCNY
									)
								}}
							</p>
							<p>
								{{
									handleTotalNumber(
										'THB',
										scope.row.amountInTHB
									)
								}}
							</p>
							<p>
								{{
									handleTotalNumber(
										'VND',
										scope.row.amountInVND
									)
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						prop="memberCount"
						align="center"
						:label="$t('report.rebate_count')"
					>
						<template slot-scope="scope">
							{{ handleNumber('', scope.row.memberCount, 0)
							}}{{ $t('report.people') }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<detail-page
			v-if="showDialog"
			:rowVal="rowVal"
			:closeDialog="
				(val) => {
					showDialog = val
					loadData()
				}
			"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
const end = dayjs()
	.endOf('day')
	.subtract(1, 'd')
const start = dayjs()
	.startOf('day')
	.subtract(1, 'd')
const setSearchTime = () => [
	dayjs()
		.startOf('day')
		.subtract(1, 'd'),
	dayjs()
		.endOf('day')
		.subtract(1, 'd')
]
export default {
	name: routerNames.rebateReport,
	components: {
		DetailPage: () => import('./components/detail-page.vue')
	},
	mixins: [list, summaryList],
	data() {
		return {
			queryData: {},
			searchTime: [start, end],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			showDialog: false,
			rowVal: {},
			merchantObj: ''
		}
	},
	computed: {
		venueTypeList() {
			return this.globalDics.bwVenueTypeList || []
		}
	},
	watch: {},
	created() {
		// this.getVenueType()
	},
	mounted() {},
	methods: {
		// async getVenueType() {
		// 	const { data } = await this.$api.getReportVenueTypeList()
		// 	this.venueTypeList = data
		// },
		loadData() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startTime: dayjs(timeArr[0]).format('YYYY-MM-DD'),
				endTime: dayjs(timeArr[1]).format('YYYY-MM-DD'),
				...this.getParams()
			}
			this.tableData = []
			// const min = dayjs(timeArr[0])
			// const max = dayjs(timeArr[1])
			// const day = dayjs(max).diff(min, 'day')
			// if (day >= 31) {
			// 	this.$message.warning(this.$t('report.31_day'))
			// 	return
			// }
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getReportRebateList(params)
				.then((res) => {
					this.loading = false
					this.tableData = res?.data?.record || []
					this.subSummary = res?.data?.summary || {}
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getReportRebateSummary(params)
				.then((res) => {
					this.loading = false
					this.totalSummary = res?.data || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		dialogData(val) {
			const timeArr = this.searchTime || []
			this.rowVal = {
				venueId: val.venueId,
				venueName: val.venueName,
				ownerMerchantId: this.queryData.ownerMerchantId,
				currency: this.merchantObj?.currency || '',
				startTime: dayjs(timeArr[0]).format('YYYY-MM-DD'),
				endTime: dayjs(timeArr[1]).format('YYYY-MM-DD')
			}
			this.showDialog = true
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.merchantObj = ''
			this.searchTime = setSearchTime()
			this.loadData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startTime: dayjs(timeArr[0]).format('YYYY-MM-DD'),
				endTime: dayjs(timeArr[1]).format('YYYY-MM-DD')
			}
			// const min = dayjs(timeArr[0])
			// const max = dayjs(timeArr[1])
			// const day = dayjs(max).diff(min, 'day')
			// if (day >= 31) {
			// 	this.$message.warning(this.$t('report.31_day'))
			// 	return
			// }
			this.exportExcel(params)
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
